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Abstract 

Each semester, our secretaries struggle to update the Campus Directory database in order to print the 
campus telephone and office/class hours directory. This is a time consuming process and the 
directory is usually late and out of date by the time it is printed. I have solved these problems by 
creating a Web interface to their existing database. Now the directory is available on the We,b. The 
information in the Web directory is current and our secretaries' workload has been reduced. Faculty 
and staff members can print a copy of the latest information as needed. 

In the new system, faculty and staff members can update their database information using a Web 
form. The Web directory provides immediate access to the updated information. Each time the Web 
directory is accessed, the database is queried and the latest information is displayed. 

The Web directory consists of the telephone listing with a link from each entry to a pop up window 
containing a picture of the faculty/staff member along with their current class/office hour 
information. 

This paper explains the files used to .generate the Web-based directory. 

Microsoft Visual InterDev 

The Web interface was developed using Microsoft Visual InterDev. Visual InterDev is an integrated 
development environment that provides all the tools you need to develop and manage a sophisticated 
Web application. It includes integrated programming, database development, site management and 
content editing tools. The Visual InterDev system requirements are shhown in Table 1. 

Visual InterDev is a tool for developing Active Server Pages (ASP). ASP files are HTML files that 
include scripts that are processed on a Microsoft Windows NT/95 server running Internet 
Information Server (IIS) with Active Server Pages Extensions. ASP files include VBScript code 
enclosed in <% %> tags, which is converted to HTML by the server before being sent to the browser. 
The result is a pure HTML page, which is browser and platform independent. 

Visual InterDev provides a complete development environment for creating Active Server 
applications, including tools that automatically generate much of the script. The tools generate the 
code to establish the database connection, perform database queries and integrate the data into 
dynamically generated HTML pages. 
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System Requirements 


Server 


Developer 


Client 


Hardware 

/ 


Minimum: 

486/66 w/16MB RAM 
Recommended: 

Pentium w/ 32MB RAM 


Minimum: 
486/66 w/16MB 
RAM 

Recommended: 
Pentium w/ 
32MB RAM 


Any computer capable 
of running a graphical 
Web browser 


Operating System 


Windows NT (preferred) 
Windows 95 


Windows NT 
Windows 95 


Any 


Software 


IIS 

Active Server Extensions 
FrontPage Extensions 


Visual InterDev 


Web browser such as 
Netscape or Internet 
Explorer 



Table 1. Visual InterDev Systme Requirements 



The Database Tables 

*• 

The Directory Database is a Microsoft Access database that is used by the Campus Administrator’s 
office to produce the campus directory and generate mailing labels, email lists, contracts, etc. The 
Web interface uses two of the existing database tables: Directory and ClassJHours, shown in Table 
2. The two tables are linked on the EmployeelD field. The directory table contains an entry for each 
faculty/staff member. The ClassJHours table includes office and class hour entries for each faculty 
member for every time slot. The Type field indicates whether the particular time is an office hour 
or a class hour. If it is a class hour, then the Course field contains the abbreviation for the course. 



Directory ClassJHours 

EmployeelD EmployeelD 

LastName Type 

FirstName Course 

Prefix StartTime 

EmailName EndTime 

DeptArea Mon 

Office_no Tue 

Building Wed 

Extension Thu 

Fri 

Table 2. Microsoft Access Directory Database Tables 



The Web Application 

The Web interface to the Directory Database is shown in Figure 1 . Each name is a hyperlink to a 
pop-up window (see Figure 4) containing the faculty/staff member's picture, directory data, and class 
and office hours information. The Email Name is a mailto link that allows the user to send email 
to a faculty/staff member simply by clicking on the Email Name. 
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The Web interface is generated using two ASP files: Table.ASP and OfficeHrs.ASP. Table.ASP 
consists of a main program that makes the database connection, executes a query on the database 
then passes the resulting recordset to subroutine GenerateTable which produces the HTML table 
shown in Figure 1. When a user clicks on a hyperlinked name, the javaScript function openWin is 
called. The EmployeelD for that name is passed to the openWin function, which in turn calls 
OfficeHrs.ASP to populate the Pop-Up window shown in Figure 4. 



Table.ASP ► GenerateTable ►openWin 



-► OfficeHrs.ASP 
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Figure 1. Web Interface to Microsoft Access Directory Database — ' d 



Table.ASP 

Table.ASP generates the Web interface shown in Figure 1. The "main program" ASP code is shown 
in Figure 2. It creates and opens a connection to the Microsoft Access Directory database, then sends 
an instruction to the database indicating the name of the database query to be executed. The resultant 
data is returned to the recordset variable rs. Subroutine GenerateTable is then called to generate the 
HTML page using the data from the recordset parameter rs. 
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<%set conn = Server.CreateObject("ADODB.Connection") 
set cmd = Server.CreateObject^ADODB.Command") 

Conn. Open SessionC'ExDirConn^onnectionString") 
cmd.ActiveConnection = conn 
cmd.CommandText = M Nancy_query" 
set rs = cmd. execute 

GenerateTable rs%> 

’ - Figure 2. Table. ASP Main Program 

GenerateTable 

The GenerateTable subroutine shown in Figure 3 produces the HTML table. Note how the ASP 
code is interspersed with the HTML tags. The ASP Extensions of the IIS Web server will 
execute the ASP script, replacing all the rs variables with the actual data. 

The GenerateTable subroutine first creates the Table and Headings from the HTML tags. Each 
pass through the while loop, a record from the recordset is used to produce a table row. 



<% Sub GenerateTable( rs )%> 

<TABLE BORDER=l> 

<TRxTH>Name<BRx/THxTH>Email</THxTH>Dept/Area</THxTH>Extension</TH> 

<TH>OfTice</THx/TR> 

<% while not rs.EOF%> 

<TR> 

<tdxA HREF="javascript: open Win (<%=rs(0)%>)”> <%=rs("LastName M )%>, 
 <%=rs( M Firstname")%>  <%=rs( ,, Prefix ,, )%x/Ax/td> 

<% if isNuH(rs( M EinailNaine")) then%> 

<td> </td> 

<%else%> 

<TD> 

<A HREF="mailto:<%=rs( ,, EmailName M )%>@MUOhio.edu ,, > 
<%=rs("EmailName”)%x/A> 

</TD> 

<%end if%> 

<TDx%=rs( M DeptArea n )%x/TD> 

<TDx%=rs( H Extension n )%x/TD> 

<TDx%=rs( ,, office_no”)%>   <%=rs( ,, Building”)%x/TD> 

</TR> 

<%rs.MoveNext 

wend 

Response.Write( "</TABLE>" ) 

End Sub%> 

Figure 3. Subroutine to Generate HTML for Campus Directory 



The LastName, FirstName becomes a hyperlink to a javaScript function that opens a pop-up 
window. When a user clicks on a name a new window is opened displaying the details for that 
individual as shown in Figure 4. 

When the code is executed on the server, each of the <%=rs(x)%> references is replaced with the 
actual data in the current record of the recordset. 
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For example, the record 

EmpID LastName FirstName Prefix EmailName 

1796 Hum Janet Ms. HrunJE 

will replace the rs variables in the following code segment: 

<A HREF="j avascript: openWin(<%=rs(0)%>)"> 

<o/ 0 ^ s ^L ast Name'')%>,  <%=rs("Firstname")%>  <%=rs("Prefix")%></A> 



generating the following HTML: 

<A HREF- 'javascript: openWin(1796)"> Hum,   Janet   Ms.</A> 



A user can simply click on the Email Name in the table to send email to any faculty/staff 
member. 

The Email Name is a mailto link formed by concatenating the EmailName from the recordset 
with @MUOhio.Edu. 

For example: 

<A HREF="mailto:<%=rs("EmailName")%>@MUOhio.edu"> 

is replaced with 

<A HREF="mailto:HumJE@MUOhio.edu"> 

The table row is completed using the remaining data from the recordset. This one subroutine 
writes the HTML for the entire directory table. 



openWin 

The javaScript function shown in Figure 5 
creates a new browser window which is 
populated by OfficeHrs. ASP. The resultant 
window is shown in Figure 4. 



"OfficeHrs.asp?EmpID="+EmpID sends a 
request to the server for the OfficeHrs.ASP 
page passing the EmpID as a query string 
parameter. OfficeHrs.ASP then uses the 
EmpID to select the data for that 
faculty/staff member. 
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Figure 4. Pop-Up Window 
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function openWin (EmpID) 

{ 

var newWin = window.open("OfficeHrs.asp?EmpID=" + EmpID, 
OfficeHrsWin","tooIbar=no,Iocation=no,directories=no,status=no, 
scroIIbars=yes, resizable=yes,copyhistory=no,width=350,height=400") 

} 

Figure 5. JavaScript Function to open Pop-Up Window 

OfficeHrs.ASP 

The ASP code shown in Figure 6 displays the faculty/staff member's name, picture, office 
location, email address and phone extension. The ASP code makes the database connection, 
then uses the EmpID passed in as a query string parameter to create the Select query. The query 
is executed against the database and the resulting information is displayed in the window. Notice 
how concatenating the EmailName with the .jpg extension forms the file name for the picture. 

<img src="images/<%=rs("EmailName")%>.jpg"> 

If the EmailName in the current record of rs is HumJE, then <%=rs("EmailName")%> will be 
replaced by HumJE resulting in 



<img src- 'images/HumJE.jpg"> 



<%set conn = Server.CreateObject("ADODB.Connection") 
set cmd = Server.CreateObject("ADODB.Command") 

Conn. Open Session(" ExDirConn_ConnectionString") 
cmd.ActiveConnection = conn 

cmd.CommandText = "Select Prefix, LastName, FirstName, EmailName, Extension, Office_no, Building from Directory 
where EmployeeID= " & request.querystring^EmpID") 
set rs = cmd.execute%> 

<bxFont Size=+1> 

<%=rs("Prefix")%> <%=rs("FirstName")%> <%=rs("LastName")%x/Fontx/bxBR> 

<table border=0> 

<trxtd> 

<img src="images/<%=rs("EmailName")%>.jpg" VVidth=100 Height=100 
ALT="<%=rs("Prefix")%> <%=rs("FirstName")%> <%=rs("LastName")%>"> 

<BRxBRx/td> 

<td> 

<table border=0> 

<trxtd>Office:</tdxtd> <%=rs("Office_no")%> <%=rs("Building")%x/tdx/tr> 

<trxtd>Phone:</tdxtd> <%=rs("Extension")%x/tdx/tr> 

<%if not isNull (rs("EmailName")) then%> 

<tr> 

<td colspan=2>Email: <BR> 

<A Href= M mailto:<%=rs("EmailName")%>@MUOhio.Edu"x%=rs("EmailName")%> 
@MUOhio.Edu</Ax/tdx/tr> 

<%end if%x/table></td></tr> 

</table> 

Figure 6. OficeHrs.ASP code to display picture, name, office, email and phone number 
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Figure 7 shows the ASP code used to generate the Office Hours table in the pop-up window. A 
query is executed to retrieve the office hours for the selected EmployeelD then displays the table 
shown at the bottom of Figure 4. 



<%cmd.CommandText = "Select * from Class_Hours where EmployeelD = 

" &request.querystring(’’EmpID’’)& " AND Type= ’Office’" 
set rsl = cmd.execute%> 

<table border=0> 

<tr> 

<%if not rsl.eof and not rsl.bof then%> 

<tdxB>Office Hours:</BxBR> 

<table border=l> 

<TRxTHxFont Size=’’l’’>Time</fontx/THxTH> 

<Font Size=" l’’>Days</fontx/THx/TR> 

<%whlle not rsl.eof%> 
ctrxtdxFont Size=’’l’’> 

<%=rsl(’’StartTime’’)%> - <BRxo/o=rsl(’’EndTime’’)%x/fontx/td> 
<tdxFontSize=’’l’’> 

<% val=rsl (’’ Mon ’’) if not val = 0 then%>M<% end if%> 
<%val=rsl("Tue") if not val = 0 then%>T<% end if%> 

<%val=rsl(" Wed") if not val = 0 then%>W<% end if%> 
<%val=rsl("Thu") if not val = 0 then%>R<% end if%> 
<%val=rsl(’’Fri") if not isnull(val) then%>F<% end if%> 
</fontx/tdx/tr> 

<%rsl.MoveNext%> 

<%wend%> 

</table> 

</td> 

<%end if%> 

Figure 7. OfficeHrs.ASP code to generate office hours table 



The query retrieves all office hour records for the selected EmployeelD. The resultant recordset 
is stored in rsl. Each record of rsl is then displayed in table format. 

Summary 

Visual InterDev is an excellent tool for developing database driven Web applications. It contains 
all the tools needed to create and test your application in a single integrated environment; 
however, it has a fairly steep learning curve. The wizards and visual tools are great for 
generating basic applications, but I found that you must understand HTML and ASP in order to 
fine-tune and create customized applications. The wizards generate too much unnecessary code 
that makes the applications difficult to understand and debug. I prefer to write my own code. It 
is a great development environment, but you need a background in HTML, programming and 
databases in order to use it effectively. 
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